/*
 * 模型添加
 * @Author: ljb 
 * @Date: 2018-03-27 17:53:51 
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-01 14:33:40
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-product-model-create {
        min-height: 600px;
    }
    
</style>
<template>
<div class="v-admin-product-model-create">
    <Row type="flex" justify="start">
        <Col push="1">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">

                <Form-item label="模型名称" prop="name">
                    <Input type="text" v-model="formValidate.name" placeholder="请输入模型名称"></Input>
                </Form-item>

                <Form-item label="所属类别" prop="category_id">
                   <Select v-model="formValidate.category_id" clearable filterable transfer>
                       <Option v-for="category in categories" :value="category.id + ''" :key="category.id">{{ category.name }}</Option>
                    </Select>
                </Form-item>

                <Form-item>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </Form-item>

            </Form>
        </Col>
    </Row>
</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

export default {
    name: 'product-model-create',

    props: ['categories'],

    data() {	
        return {

            formValidate : {

                name : '',

                category_id : ''

            },                  //新建视频时的表单

            ruleValidate: {
                name: [
                    { required: true, message: '模型名称不能为空', trigger: 'blur,change' }
                ],
                category_id: [
                    { required: true, message: '所属类别不能为空', trigger: 'blur,change' },
                ]
            },

        }
    },
    methods: {

        /**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if ( valid ) {

                    this.dataPost();

                } else {

                    this.$Message.error('存在未填写的条目!');

                }
            })
        },

        /**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined} 
         */
        handleReset (name) {

            this.$refs[name].resetFields();

        },

        /**
         * post数据
         * @return {undefined}
         */
        dataPost(){

            this.$emit('post',this.formValidate);

        }
        
    }
}
</script>